<template>
	<TabGrayEasyCard title="设备维保" @onMore="goPage" :tabs="card.tabs" :curTab="card.curTab" :tabRight="card.tabRight" :grayCardList="card.grayCardList" @onChange="changeTab" v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
		<hsPageTable :stripe="false" :isHaveIndex="false" :isHavePage="false" :tableData="tableData.data" :cloumns="tableData.columns" />
	</TabGrayEasyCard>
</template>

<script setup lang="jsx">
	import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard';
	import dashBoardApi from '@/api/Manage/Business/dashBoard';
	import { reportLog } from '@/utils/reportLog';
	import { reactive, watch } from 'vue';
	import { useRouter } from 'vue-router';
	import { parseTime } from '@/utils/publicUtils';

	const router = useRouter();

	const props = defineProps({
		permi: {
			type: String,
			required: false,
			default: '',
		},
		hideList: {
			type: Array,
			required: false,
		},
		projectCode: {
			type: String,
			required: true,
			default: '',
		},
		updateDate: {
			type: String,
			required: false,
			default: '',
		},
	});

	watch(
		() => props.projectCode,
		() => {
			queryList();
		},
		{ immediate: true },
	);

	let card = reactive({
		tabs: [{ label: '全部', value: 'all' }],
		curTab: 'all',
		tabRight: '',
		grayCardList: [
			{ label: '按时完成率', value: '', unit: '%', color: '' },
			{ label: '逾期进行中', value: '', unit: '', color: '' },
		],
	});

	let tableData = reactive({
		data: [],
		columns: [
			{ prop: 'inventoryName', label: '类型', align: 'left' },
			{ prop: 'deviceName', label: '设备名称', align: 'left' },
			{ prop: 'statusName', label: '状态', align: 'center' },
			{ prop: 'formatPlanCompleteTime', label: '完成时间', align: 'center' },
			// { prop: 'completePointNum', label: '逾期时间', align: 'right' },
		],
	});

	const changeTab = () => {
		queryList()
	};

	function queryList() {
		dashBoardApi.equipmentMaintenCardListApi({ projectCode: props.projectCode, queryTime: props.updateDate }).then(res => {
			let resData = res.data;
			if (resData.code != 200) return;
			card.tabRight = resData.data.deviceQueryTime;
			resData.data.list.forEach(item => {
				item.formatPlanCompleteTime = item.planCompleteTime ? parseTime(item.planCompleteTime, '{y}-{m}-{d}') : '-';
			});
			tableData.data = resData.data.list || [];
			card.grayCardList[0].value = resData.data.completeRate;
			card.grayCardList[1].value = resData.data.overdueNum || 0;
		});
	}

	function goPage() {
		reportLog({
			type: 4,
			resourceKey: props.permi,
		});
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'page_query_device_maintenance_list',
				rTitle: '设备维保明细',
				projectCode: props.projectCode,
				queryTime: props.updateDate,
			},
		});
	}
</script>

<style scoped lang="scss">
	:deep(#my-table) {
		height: 100%;
		.el-scrollbar__view {
			height: 100%;
		}
		.img-icon {
			position: relative;
			top: 3px;
			width: 14px;
			margin: 0 2px;
		}
		.el-table__inner-wrapper {
			&::before {
				z-index: -1;
			}
		}
	}
</style>
